<!DOCTYPE html>
<html lang="en">
<head>
    {% load static %}
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="{% static "bs/css/bootstrap.min.css" %}">
    <link rel="icon" href="{% static 'img/arrow-up.png' %}" type="image/x-icon">
    <link rel="stylesheet" href="{% static 'bs/css/back.css' %}">
    <link rel="stylesheet" href="{% static 'jqgrid/css/trirand/ui.jqgrid-bootstrap.css' %}">
    <link rel="stylesheet" href="{% static 'jqgrid/css/jquery-ui.css' %}">
    <script src="{% static "bs/js/jquery-1.11.1.min.js" %}"></script>
    <script src="{% static "bs/js/bootstrap.min.js" %}"></script>
    <script src="{% static 'jqgrid/js/trirand/src/jquery.jqGrid.js' %}"></script>
    <script src="{% static 'jqgrid/js/trirand/i18n/grid.locale-cn.js' %}"></script>
    <script src="{% static 'bs/js/ajaxfileupload.js' %}"></script>
{#    <style>#}
{#        .table>tbody>tr>td{#}
{#                border:0px;#}
{#                }#}
{##}
{#    </style>#}
</head>
<body>
    <!--导航条-->
<nav class="navbar navbar-default" style="background: white">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">持明法洲管理系统</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
          <li><a href="#">欢迎<span style="color: blue"></span></a></li>
<!--          <li class="dropdown">-->
<!--              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-user"></span> <span class="caret"></span></a>-->
<!--              <ul class="dropdown-menu">-->
<!--                <li><a href="#">马洪顺</a></li>-->
<!--                <li><a href="#">钟雨泽</a></li>-->
<!--                <li><a href="#">唐振岚</a></li>-->
<!--                <li role="separator" class="divider"></li>-->
<!--                <li><a href="#">代志广</a></li>-->
<!--                <li role="separator" class="divider"></li>-->
<!--                <li><a href="#">王成彬</a></li>-->
<!--              </ul>-->
<!--          </li>-->
          <li>
              <a href="">
                退出登录
                <span class="glyphicon glyphicon-log-out"></span>
              </a>
          </li>

      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-2">
            <div class="panel-group" id="accodin">
                <!--面板1-->
                <div class="panel panel-default">
                    <!--头部 触发器-->
                    <div class="panel-heading">
                        <a href="#myCollapse1" data-toggle="collapse" data-parent="#accodin"  style="color: #474348">用户管理</a>
                    </div>
                    <!--内容 子菜单-->
                    <div id="myCollapse1" class="collapse">
                        <!--list-group 列表组-->
                        <ul class="list-group">
                            <li class="list-group-item"><a href="">用户列表</a></li>
                            <li class="list-group-item"><a href="">用户添加</a></li>
                            <li class="list-group-item"><a href="">用户其他</a></li>
                        </ul>
                    </div>
                </div>
                <!--面板2-->
                <div class="panel panel-default">
                    <!--头部 触发器-->
                    <div class="panel-heading">
                        <a href="#myCollapse2" data-toggle="collapse" data-parent="#accodin"  style="color: #474348">文章管理</a>
                    </div>
                    <!--内容 子菜单-->
                    <div id="myCollapse2" class="collapse">
                        <!--list-group 列表组-->
                        <ul class="list-group">
                            <li class="list-group-item"><a href="">图书列表</a></li>
                            <li class="list-group-item"><a href="">图书添加</a></li>
                            <li class="list-group-item"><a href="">图书其他</a></li>
                        </ul>
                    </div>
                </div>
                <!--面板3-->
                <div class="panel panel-default">
                    <!--头部 触发器-->
                    <div class="panel-heading">
                        <a href="#myCollapse3" data-toggle="collapse" data-parent="#accodin"  style="color: #474348">专辑管理</a>
                    </div>
                    <!--内容 子菜单-->
                    <div id="myCollapse3" class="collapse">
                        <!--list-group 列表组-->
                        <ul class="list-group">
                            <li class="list-group-item"><a href="">用户列表</a></li>
                            <li class="list-group-item"><a href="">用户添加</a></li>
                            <li class="list-group-item"><a href="">用户其他</a></li>
                        </ul>
                    </div>
                </div>
                <!--面板4-->
                <div class="panel panel-default">
                    <!--头部 触发器-->
                    <div class="panel-heading">
                        <a href="#myCollapse4" data-toggle="collapse" data-parent="#accodin"  style="color: #474348">轮播图管理</a>
                    </div>
                    <!--内容 子菜单-->
                    <div id="myCollapse4" class="collapse">
                        <!--list-group 列表组-->
                        <ul class="nav nav-pills nav-stacked">
                             <li><a href="javascript:$('#centerLayout').load('{% static 'static_html/banner.html' %}')" style="font-weight: bold">轮播图列表</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-10" id="centerLayout" style="display: block">
<!--            巨幕-->
            <div class="jumbotron">
                <div class="container">
                  <h2 style="color: #8A847F">欢迎来到持明法洲后台管理系统</h2>
<!--                  <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>-->
<!--                  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>-->
                </div>
            </div>
<!--           轮播图-->
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
              <!-- Indicators -->
              <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
              </ol>

              <!-- Wrapper for slides -->
              <div class="carousel-inner" role="listbox">
                <div class="item active">
                  <img src="{% static "img/shouye.jpg" %}" alt="...">
                  <div class="carousel-caption">
                    ...
                  </div>
                </div>
                <div class="item">
                  <img src="{% static "img/3.jpg" %}" alt="..." style="width: 1200px;height: 330px">
                  <div class="carousel-caption">
                    ...
                  </div>
                </div>
                <div class="item">
                  <img src="{% static "img/1.jpg" %}" alt="..." style="width: 1200px;height: 330px">
                  <div class="carousel-caption">
                    ...
                  </div>
                </div>
              </div>

              <!-- Controls -->
              <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
              </a>
              <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
              </a>
            </div>
        </div>
        <div class="col-md-10" id="lunbotuguanli" style="display: none">
            {#            轮播图管理#}
             <!--页头-->
            <div class="page-header">
                <h2><strong>轮播图管理</strong></h2>
            </div>
            <ul class="nav nav-tabs ">
                <li class="active"><a href="#"><b>轮播图信息</b></a></li>
            </ul>

            <div class="panel panel-default" style="padding: 40px">
                <!-- jqgrid表格的容器 -->
                <table id="bannerTable"></table>
                <div class="alert alert-success" role="alert" id="addBannerMsg" style="display: none">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <strong id="msgShow"></strong>
                </div>
                <div id="bannerPagerNew" style="width: auto;height: 50px"></div>
                <!--模态框的打开方式  可以使用modal方法打开 也可以通过指定data-target与data-toggle两个属性来打开指定的模态框 -->
                <button class="btn btn-primary" data-aa="@456" data-whatever="@123" id="btn" data-toggle="modal"
                        data-target="#myModal">添加
                </button>
                <button class="btn btn-warning" id="edit"><span class="glyphicon glyphicon-edit"></span> 修改</button>
                <button class="btn btn-danger" id="del">删除</button>
            </div>
        </div>
    </div>
</div>

{#   底部导航条，固定在底部    #}
<div class="panel-footer navbar-fixed-bottom">
    <div class="panel-title">
        <h5 style="text-align: center">@百知教育 baizhi@zparkhr.com.cn</h5>
    </div>
</div>

<!--静态模态框-->
<div class="modal fade" tabindex="-1" data-backdrop="false" role="dialog" id="myModal">
    <div class="modal-dialog">
        <!--模态框内容-->
        <div class="modal-content">
            <!--模态框标题-->
            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title">编辑轮播图</h4>
            </div>
            <!--模态框内容体-->
            <form action="" id="bannerForm">
                <div class="modal-body form-horizontal">
                    <div class="form-group ">
                        <label class="col-sm-2 control-label">标题：</label>
                        <div class="col-sm-10">
                            <input type="text" name="title" id="upload_title" class="form-control"
                                   placeholder="请输入图片标题">
                        </div>
                    </div>
                    <div class="form-group ">
                        <label class="col-sm-2 control-label">状态：</label>
                        <div class="col-sm-10">
                            <input type="text" name="status" id="upload_status" class="form-control"
                                   placeholder="请选择文件状态">
                        </div>
                    </div>
                    <div class="form-group ">
                        <label class="col-sm-2 control-label">图片：</label>
                        <div class="col-sm-10">
                            <input type="file" name="pic" id="upload_pic" class="form-control" placeholder="">
                        </div>
                    </div>

                </div>
            </form>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="save">保存</button>
                <button type="button" class="btn btn-warning" id="save" data-dismiss="modal">取消</button>
            </div>

        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script>

$(function () {
    $('#huchuguanlilunbo').click(function () {
        $('#lunbotu').attr("style","display: none")
        $('#lunbotuguanli').attr("style","display: block")
        $('#addBannerMsg').attr("style","display: block")

    });

    $('#bannerTable').jqGrid({
        url: "",
        datatype: "json",
        autowidth: true,
        pager: "bannerPagerNew",
        viewrecords: true,
        rownumbers: true,
        rowNum: 3,
        rowList: [3, 6, 10],
        styleUI: "Bootstrap",
        colNames: ["ID", "标题", "状态", "创建时间", "图片", "操作"],
        colModel: [
            {name: "id"},
            {name: "title"},
            {name: "status"},
            {name: "create_time"},
            // 回显图片
            {
                name: "pic", formatter: function (cellvalue, options, rowObject) {
                    return "<img style='height: width:' src='/static/'+  cellvalue>";
                }
            },
            {
                name: "option", formatter: function (cellvalue, options, rowObject) {
                    var content = "<button class=\"btn btn-danger\"><span class=\"glyphicon glyphicon-edit\"></span> 删除</button>";
                    return content;
                }
            },
        ],
    });

    // 点击模态框的保存按钮  将轮播图的信息发送到后台进行保存
    $("#save").click(function () {

        // 通过formdata完成文件上传
        var title = $("#upload_title").val();
        var status = $("#upload_status").val();
        var pic = $("#upload_pic")[0].files[0];

        var formData = new FormData;

        formData.append('title', title);
        formData.append('status', status);
        formData.append('pic', pic);

        $.ajax({
            url: "/main/add_banner/",
            datatype: "json",
            type: "post",
            //  如何获取当前表单的数据
            data: formData,
            async: false,
            contentType: false,     // 不设置contenttype请求头
            processData: false,     // 使数据不做处理
            success: function (data) {
                // 根据返回值判断是否上传成功，上传成功隐藏模态框

            }
        });
    });

})

</script>
</body>
</html>